<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sub.css" />
		<link rel="stylesheet" type="text/css" href="css/detail.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
	   <header class="mui-bar mui-bar-nav detail">
	       <a class="mui-action-back mui-pull-left icon-left"></a>
	       <h1 class="detail-tit mui-ellipsis mui-pull-left">策划案例</h1>
	       <a href="" class="mui-pull-right icon-serve" style="font-size: .64rem;"></a>
	       <a href="" class="mui-pull-right icon-share mr24" style="font-size: .64rem;"></a>
	   </header>
		<div class="mui-content">
			<!--S头部信息-->
			<div id="content-header">
			</div>
			<!--E头部信息-->
			
			<!--详情选择部分-->
			<div class="detail-select">
				<ul>
					<li class="active" data-js="zpxsJs">照片欣赏</li>
					<li data-js="albhJs">案例包含</li>
					<li data-js="gkpjJs">顾客评价</li>
				</ul>
			</div>
			<!--详情选择部分-->
			<!--内容详情部分-->
			<div class="detail-content" id="conWrap">
				<div class="loading">
					<img src="img/static/loading1.gif"/>
				</div>
			</div>
			<!--内容详情部分-->
		</div>
		<!--脚部-->
		<nav class="mui-bar mui-bar-tab detail-footer">
		<h1 class="phone-num mui-pull-left">400-8819-520</h1>
		<a href="#" class="footer-btn mui-pull-right">预约看地</a>
		<div class="mui-pull-right mt30 mr24">
			<!--<i class="icon-like"></i>
			<i class="icon-comment"></i>-->
			<i class="icon-collect"></i>
		</div>
		</nav>
		<!--头部样式2-->
		<script type="text/html" id="wedheader">
			<div class="header-pic">
				<img src="{{result.pic}}" class="detail_pic">
			</div>
			<div class="detail-header wed-header">
				<h1 class="mod-title-30">{{result.title}}</h1>
				<div class="mt12">
					<span class="mod-price">&yen;{{result.shemher_price}}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="mod-detail-24">销量:&nbsp;&nbsp;{{result.sell_num}}</span>
				</div>
				<p class="mod-detail-22 lh36"><i class="icon-locat mr6"></i>喜来登大酒店</p>
				<p class="mod-detail-22">商家：Shllife摄影</p>
				<p class="mod-detail-22 lh36">客户评星:&nbsp;&nbsp;<i class="icon-star"></i></p>
			</div>
		</script>
		<!--商家案例 管家案例 摄影案例 婚礼案例  餐厅介绍-->
		<script type="text/html" id="sjalJs">
			<div class="shopcase-wrap">
				{{ each result.list as item index}}
					<div class="shopcase mui-clearfix">
						<div class="shopcase-header mui-pull-left">
							<img src="{{item.pic}}?imageView2/1/w/261/h/261"/>
						</div>
						<div class="shopcase-body mui-pull-right">
							<h1 class="mod-title-30">{{item.title}}</h1>
							<p class="mod-price mt6">&yen;{{item.shemher_price}}/套</p>
							<!--<p class="mod-detail-24 mui-ellipsis mt6">桌数</p>-->
							<p class="mod-detail-24 mui-ellipsis-2 lh30 mt6">{{item.abstract}}</p>
							<a href="javascript:void(0)" class="mod-nav">查看详情 ></a>
						</div>
					</div>
				{{/each}}
			</div>
		</script>
		<!--顾客评价-->
		<script type="text/html" id="gkpjJs">
			<div class="comment-wrap">
				{{each result.list as item index}}
				<div class="comment">
					<div class="comment-header mui-clearfix">
						<div class="comment-header-img mui-pull-left">
							<img src="{{item.uportrait}}?imageView2/1/w/99/h/99"/>
						</div>
						<div class="comment-header-con mui-pull-left">
							<h1 class="mod-title-24 mui-ellipsis">{{item.uname}}</h1>
							<div class="mod-detail-22 mt12">
								{{each toArray(item.star)}}
									<i class="icon-star"></i>
								{{/each}}
							</div>
							<p class="mod-info-20 mui-ellipsis mt12"> 2017-06-31</p>
						</div>
					</div>
					<div class="comment-body">
						<p class="mod-info-20 mui-ellipsis-2">{{item.content}}</p>
						<div class="comment-body-imgs">
							{{each item.img as pitem pindex}}
								{{if pindex<3}}
									<img src="{{pitem}}?imageView2/1/w/150/h/150"/>
								{{/if}}
							{{/each }}
						</div>
					</div>
				</div>
				{{/each}}
			</div>
		</script>
		<!--照片欣赏， 商品详情-->
		<script type="text/html" id="zpxsJs">
			<div class="show-img">
				{{each result as item index}}
					<img src="{{item}}?imageView2/2/w/400/h240"/>
				{{/each}}
			</div>
		</script>
		<!--套系包含， 商品信息，案例包含-->
		<script type="text/html" id="albhJs">
			<div class="show-img">
				{{each result.arrangement as item}}
					{{item}}
				{{/each}}
				{{each result.explain as item}}
				{{item}}
				{{/each}}
				{{each result.lighting as item}}
					{{item}}
				{{/each}}
			</div>
			<!--<div class="case-wrap">
				<div class="case">
						<div class="case-header">
							<h1 class="mod-title-22">造型</h1>
						</div>
						<div class="case-body mt12">
							<div class="case-item mui-clearfix">
								<p class="case-item-tit mui-pull-left">[ 新娘服装 ]</p>
								<p class="case-item-con mui-pull-right">提供新提供新提供新提供新提供新郎拍摄西摄西装提供新郎拍摄西装</p>
							</div>
						</div>
				</div>
			</div>-->
		</script>
		<script src="js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*请求头部内容*/
			mui.ajax("http://www.xhwed.com/xhwe.php/PlanPackage/planDetails",{
				data:{"wy":getUrlParam("wy")},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					console.log(data);
					var html = template("wedheader",data)
					mui("#content-header")[0].innerHTML = html;
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					console.log(type);
				}
			})
			
			selectMethod("zpxsJs");
			/*请求筛选框的数据*/
			function selectMethod(sSel) {
				var strurl=[
				"http://www.xhwed.com/xhwe.php/PlanPackage/HousekeeperCase",//照片欣赏
				"http://www.xhwed.com/xhwe.php/PlanPackage/HousekeeperIntroduce",//案例包含
				"http://www.xhwed.com/xhwe.php/PlanPackage/planComment"];//顾客评论
				var selUrl="";
					mui(".detail-select ul li").each(function(index,item){
						if(item.getAttribute("data-js")==sSel)
						{
							selUrl=strurl[index];
							return ;
						}
					})
				if(selUrl=="")
				mui("#conWrap")[0].innerHTML = '<div class="null-img"><img src="img/static/null.jpg"/></div>';
				else {
					mui.ajax(selUrl,{
						data:{"wy":getUrlParam("wy")},
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						success:function(data){
							console.log(data);
							template.config("escape", false); //设置不编码输出就是输出html
							if(sSel=="gkpjJs")
								var html =data.result.list?template(sSel,data):'<div class="null-img"><img src="img/static/null.jpg"/></div>';
							else 
								var html=data.result?template(sSel,data):'<div class="null-img"><img src="img/static/null.jpg"/></div>';
							mui("#conWrap")[0].innerHTML = html;
						},
						error:function(xhr,type,errorThrown){
							//异常处理；
							console.log(type);
						}
					})
				}
			}
			
		</script>
	</body>
</html>